<template>
  <div class="chart16">
    <div id="chart16">

    </div>
  </div>
</template>

<script>
import echarts from 'echarts'


var option = {
  color: ['#29DC96', '#FFDB5C', '#67E0E3'],
  // title: {
  //   text: '某地区蒸发量和降水量',
  //   subtext: '纯属虚构'
  // },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    right: 0,
    data: ['订单金额', '订单数量'],
    textStyle: {
      color: '#fff'
    }
  },
  grid: {
    top: '14%',
    left: '0%',
    right: '6%',
    bottom: '0%',
    containLabel: true,

  },
  toolbox: {
    show: false,
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      data: [],
      axisLine: { lineStyle: { color: '#ffffff' } }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLine: { lineStyle: { color: '#ffffff' } }
    },
    {
      nameLocation: 'start',
      type: 'value',
      axisLine: { lineStyle: { color: '#ffffff' } }
    }
  ],
  series: [
    {
      name: '订单金额',
      type: 'bar',
      // data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
      data: [],
      markPoint: {
        data: [
          { type: 'max', name: '最大值' },
          { type: 'min', name: '最小值' }
        ]
      },
      markLine: {
        data: [
          { type: 'average', name: '平均值' }
        ]
      }
    },
    {
      name: '订单数量',
      type: 'bar',
      yAxisIndex: 1,
      // data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
      data: [],
      markPoint: {
        // data: [
        //   { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183 },
        //   { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
        // ]
      },
      markLine: {
        data: [
          { type: 'average', name: '平均值' }
        ]
      }
    }
  ]
};
export default {
  props: {
    chatData: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  data() {
    return {
      box: null,
      option: option
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (!this.box) {
        this.box = echarts.init(document.getElementById('chart16'));
      }
      this.initOption()
      this.box.setOption(this.option);
    },
    initOption() {
      if (this.chatData) {
        let keys = Object.keys(this.chatData)
        this.option.xAxis[0].data = keys
        let data1 = []
        let data2 = []
        for (let key in this.chatData) {
          data1.push(this.chatData[key][0].orderAmount)
          data2.push(this.chatData[key][0].orderCount)
        }
        this.option.series[0].data = data1
        this.option.series[1].data = data2
        // this.chatData
      }
    },
    resize() {
      this.box.resize()
    }
  },
  watch: {
    chatData: {
      deep: true,
      handler(val) {
        this.init()
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chart16 {
  width: 100%;
  height: 100%;
}
#chart16 {
  width: 100%;
  height: 100%;
}
</style>
